Skip to content

Refine poster/talk preview card thumbnail (#840 follow-up)#1378

Merged
jonfroehlich merged 1 commit into
masterfrom
840-preview-card-styling
Jun 22, 2026
Merged

Refine poster/talk preview card thumbnail (#840 follow-up)#1378
jonfroehlich merged 1 commit into
masterfrom
840-preview-card-styling

Conversation

@jonfroehlich

Copy link
Copy Markdown
Member

Small visual polish follow-up to the #840 preview card (which shipped in 2.18.0), based on testing against real portrait and landscape posters.

Changes

  • Rounded rect + subtle outline on the thumbnail (--border-radius-md / --color-border), so it reads as a framed preview.
  • Height-capped, not width-driven — portrait posters stay compact (≤240px tall) instead of running tall; landscape posters still fill the card width.
  • Inline file size — the size sits next to its label instead of floating to the trailing edge, so a lone PDF action no longer leaves an awkward gap.
  • Card hugs its imagethumbnailPreview.js now sizes the image to a fixed 260×240 box (aspect preserved) so it has a definite width, and the card shrink-wraps it. This also resets the global base.css .popover { width: 50vw; min-width: 300px } on the preview card, which was pinning it ~300px wide and leaving whitespace beside portrait thumbnails.

All scoped to .artifact-preview-*, so the Cite popover is unaffected.

Testing

Verified locally against a portrait poster (StreetReaderAI ASSETS 2025) and a landscape poster — both now hug the thumbnail with no side whitespace, sizes group cleanly with their labels.

CSS/JS only; no template, model, or test changes.

🤖 Generated with Claude Code

)

Polish follow-up to the #840 preview card, refining how the thumbnail is
framed and sized:

- Rounded-rect + subtle 1px outline so the thumbnail reads as a framed
  preview (using the --border-radius-md / --color-border tokens).
- Height-capped instead of width-driven, so portrait posters stay compact
  rather than running tall; landscape posters still fill the card width.
- File size now sits next to its label instead of floating to the trailing
  edge, so a lone action (PDF only) no longer leaves an awkward gap.
- The card hugs its image: thumbnailPreview.js sizes the image to a fixed
  260x240 box (aspect preserved) so it has a definite width, and the card
  shrink-wraps it. This also resets the global base.css
  `.popover { width: 50vw; min-width: 300px }` on the preview card, which was
  pinning it ~300px wide and leaving whitespace beside portrait thumbnails.

Scoped to .artifact-preview-* so the Cite popover is unaffected.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@jonfroehlich

Copy link
Copy Markdown
Member Author

Here's the two poster types.

Portrait

image

Landscape

image

@jonfroehlich jonfroehlich merged commit ab88b43 into master Jun 22, 2026
3 checks passed
@jonfroehlich jonfroehlich deleted the 840-preview-card-styling branch June 22, 2026 21:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant